<template>
	<view class="car">
		<!-- 卡片 -->
		<view class="card" v-for="item in list" :key="item.id">
			<view class="block">
				<evan-checkbox class="checkbox" v-model="item.isChecked"></evan-checkbox>
				<view class="info">
					<image class="img" :src="item.productPic"></image>
					<view class="info-text">
						<view class="gname">
							{{ item.productName }}
						</view>
						<view class="code">
							<view class="p">
								编号: {{ item.productSkuId }}
							</view>
							<view class="p">
								价格: ¥{{ item.price }}
							</view>
						</view>
						<view class="num">
							数量: {{ item.quantity }}
						</view>
					</view>
				</view>
			</view>
			<!-- 步进器 -->
			<view class="steps">
				<view class="step-reduce" @tap="reduce(item)">
					-
				</view>
				<view class="step-text">
					{{ item.quantity }}
				</view>
				<view class="step-add" @tap="add(item)">
					+
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer-bar">
			<view class="sel-all">
				<evan-checkbox class="checkbox" v-model="isAllChecked">全选</evan-checkbox>
			</view>
			<view class="price">
				合计: ¥
				<view class="text">
					{{ total }}
				</view>
				<view class="btn" @tap="goPay">
					结算
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findAllCartItem,delCartItems } from "../../../api/user/index.js";
	import { addPreOrder } from "../../../api/order/index.js";
	import mix from "../../../mixins/index.js";
	export default {
		mixins: [mix],
		data() {
			return {
				list: [], // 购物车 - 列表
				isChecked: false, // 购物车 - 是否选中
			};
		},
		computed:{
			// 购物车 - 是否全选
			isAllChecked:{
				get(){
					// 判断 - 是否有商品
					if(this.list.length > 0){
						return this.list.every(ele=>ele.isChecked)
					}
					return false
				},
				set(val){
					this.list.forEach(ele=>ele.isChecked = val)
				}
			},
			// 购物车 - 总价
			total(){
				return this.list.reduce((total,current)=>{
					// 判断 - 是否选中
					if(current.isChecked){
						return total + current.quantity * current.price;
					}
					return total;
				},0)
			}
		},
		onLoad() {
			// 判断 - 是否登陆
			if(this.checkLogin()){
				this.init()
			}
		},
		methods:{
			init(){
				// 获取购物车列表
				findAllCartItem().then(res=>{
					// 添加选框 - 所有商品
					res.data.data.items.forEach(ele=>ele.isChecked = false);
					this.list = res.data.data.items;
					this.cartId = this.list.id
				})
			},
			// 结算
			goPay(){
				// 选中的商品列表
				var items = this.list.filter(ele=>ele.isChecked);
				// 构建提交对象
				var orderInfoVo = {
					orderItemList: []
				};
				// 生成确认单 - 参数列表
				items.forEach(ele=>{
					orderInfoVo.orderItemList.push({
						cartId: ele.id,
						productId: ele.productId,
						productQuantity: ele.quantity,
						productSkuId: ele.productSkuId
					})
				});
				// 生成确认单
				addPreOrder(orderInfoVo).then(res=>{
					// 判断 - 是否成功
					if(res.data.success){
						uni.showToast({
							title: '购买成功,1s后跳转到订单确认页',
							icon: 'none'
						});
						// 跳转 - 生成订单页面
						setTimeout(()=>{
							uni.navigateTo({
								url: `../../order/confirmOrder/confirmOrder?id=${res.data.data.orderId}`
							});
						},1000)
					}
				})
			},
			// 减
			reduce(val){
				val.isChecked = true;
				var _this = this;
				if(val.quantity>1){
					val.quantity--
				}else{
					// 弹窗
					uni.showModal({
						title: "是否删除该商品?",
						confirmText: "确认",
						cancelText: "取消",
						success(res){
							if(res.confirm){
								// 删除购物车 - 参数 - 商品id - 列表
								delCartItems([val.id]).then(res=>{
									if(res.data.success){
										uni.showToast({
											title: '删除成功'
										});
										_this.init();
									}else{
										uni.showToast({
											title: '删除失败',
											icon: 'error'
										});
									}
								})
							}else{
								uni.showToast({
									title: '您取消了'
								});
							}
						}
					})
				}
			},
			// 加
			add(val){
				val.isChecked = true;
				val.quantity++
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "./index.scss"
</style>
